<template>
  <div>
    <!-- 详情轮播图 -->
    <van-swipe class="detail-swipe" :autoplay="3000" indicator-color="white" @change="onChange" :show-indicators="false">
      <van-swipe-item v-for="(item, index) in list" :key="index" @touchstart.prevent="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        <img v-lazy="item" />
        <div class="swipe-info flex">
          <div class="info-title flex-1">{{ title }}</div>
          <div class="info-num">
            <van-icon name="photo" />
            {{ current + 1 }}/3
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 淡入淡出 -->
    <fade-animate>
      <!-- 图片预览 -->
      <img-preview v-if="showPreview" :list="list" @close="showPreview = false"></img-preview>
    </fade-animate>
  </div>
</template>

<script>
import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
import FadeAnimate from '@/components/FadeAnimate/FadeAnimate.vue'
export default {
  name: 'HomeSwiper',
  props: {
    title: String,
    list: Array,
  },
  components: {
    ImgPreview,
    FadeAnimate,
  },
  data() {
    return {
      current: 0,
      showPreview: false,
      clickFlag: false, // 是否点击（区别点击和滑动轮播图）
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    onTouchStart() {
      this.clickFlag = true
    },
    onTouchMove() {
      this.clickFlag = false
    },
    onTouchEnd() {
      if (this.clickFlag) {
        // 点击
        this.showPreview = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.detail-swipe {
  position: relative;
  .van-swipe-item {
    img {
      width: 100%;
      height: 200px;
    }
    .swipe-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 0.3rem;
      color: #fff;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
      .info-title {
        font-size: 0.16rem;
        padding: 0 0.1rem;
      }
      .info-num {
        height: 0.16rem;
        line-height: 0.16rem;
        margin-top: 0.07rem;
        padding: 0 0.2rem;
        border-radius: 0.1rem;
        background: rgba(0, 0, 0, 0.7);
        font-size: 0.12rem;
        .iconfont {
          font-size: 0.12rem;
        }
      }
    }
  }
}
</style>
